import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, ScrollView, ImageBackground, FlatList, RefreshControl, ActivityIndicator } from 'react-native';
import { Flex, Toast } from '@ant-design/react-native';
import Suspensions from '~/pages/developer/publics/Susoension';
import { Card } from 'react-native-shadow-cards';
import CwCard from '~/components/cw-card';
import { getParkingPlanInfo, getParkingDataListByPlanID } from '~/api/parking';
import moment from 'moment';
let pagecount = 0;
let index = 1;
let size = 10;
class ActivityInfo extends Component {
    static navigationOptions = {
        headerTransparent: true,
        headerTintColor: 'white',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            list: [],
            httphead: '',
            title: '',
            ProjectDataID: 0,
            imglist: [],
            CompanyBuildingID: 0,
            noticelist: [],
            ParkingPlanID: this.props.navigation.getParam('ParkingPlanID'),
            page_index: 1, //页
            page_size: 10, //每页条数
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            parkinglist: [],
        };
        console.disableYellowBox = true;
        getParkingPlanInfo(this.state.ParkingPlanID).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data,
                });
            } else {
                Toast.info(r.msg, 1);
            }
        });
        this.getparkinglistbyplanid();
    }
    getparkinglistbyplanid() {
        getParkingDataListByPlanID({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
            condidate: { parkingPlanID: this.state.ParkingPlanID },
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkinglist: r.data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            }
        });
    }
    _onRefresh() {
        this.setState({ footer: 0, page_index: index, page_size: size }, () => {
            this.getparkinglistbyplanid();
        });
    }

    //上拉加载更多
    loadData = () => {
        this.setState({ isLoading: false });
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    getParkingDataListByPlanID({
                        page_index: this.state.page_index,
                        page_size: this.state.page_size,
                        condidate: { parkingPlanID: this.state.ParkingPlanID },
                    }).then((r) => {
                        if (r.code === 0) {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            this.setState({
                                parkinglist: dataArray,
                                isLoading: false,
                            });
                        } else {
                            console.log(r);
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{ textAlign: 'center' }}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _HeaderView = () => {
        return (
            <>
                <View style={{ flex: 1 }}>
                    <ImageBackground
                        style={{ width: '100%', height: 230, resizeMode: 'repeat', alignItems: 'center' }}
                        source={require('~/assets/public/juxing.png')}
                    >
                        <Text style={{ color: 'white', fontSize: 18, marginTop: 32 }}>活动详情</Text>
                    </ImageBackground>
                    <View style={{ flex: 1, borderRadius: 20, marginTop: -110, backgroundColor: 'white', }}>
                        <View
                            style={{
                                paddingBottom: 10,
                                width: '100%',
                                marginBottom: 10,
                            }}>
                            <Flex style={{ width: '100%' }} justify={'between'}>
                                <Text
                                    style={{
                                        fontSize: 19,
                                        fontWeight: 'bold',
                                        color: '#333333',
                                        marginTop: 20,
                                        marginLeft: 10,
                                    }}>
                                    {this.state.list.PlanName}
                                </Text>
                                <Text style={{ color: 'red', fontSize: 15, marginRight: 10 }}>
                                    {this.state.list.PlanState === 2 && '失效'}
                                    {this.state.list.PlanState === 3 && '草稿'}
                                    {this.state.list.PlanState === 4 && '取消'}
                                    {this.state.list.PlanState === 5 && '作废'}
                                    {this.state.list.PlanState === 6 && '待审核'}
                                    {this.state.list.PlanState === 7 && '审核失败'}
                                    {this.state.list.PlanState === 1 &&
                                        this.state.list.ValidBegin < moment().format() &&
                                        this.state.list.ValidEnd > moment().format() && <Text style={{ color: 'red' }}>进行中</Text>}
                                    {this.state.list.PlanState === 1 && this.state.list.ValidBegin > moment().format() && (
                                        <Text style={{ color: 'red' }}>待进行</Text>
                                    )}
                                    {this.state.list.PlanState === 1 && this.state.list.ValidEnd < moment().format() && (
                                        <Text style={{ color: 'red' }}>已完成</Text>
                                    )}
                                </Text>
                            </Flex>
                            <Flex style={{ width: '100%' }} justify={'between'}>
                                <Text
                                    style={{
                                        fontSize: 15,
                                        color: '#666666',
                                        marginTop: 10,
                                        marginLeft: 10,
                                    }}>
                                    活动楼盘:
                            {this.state.list.BuildingName}
                                </Text>
                            </Flex>
                            <Flex style={{ width: '100%' }} justify={'between'}>
                                <Text
                                    style={{
                                        fontSize: 15,
                                        color: '#666666',
                                        marginTop: 10,
                                        marginLeft: 10,
                                    }}>
                                    活动时间:
                                    {moment(this.state.list.ValidBegin).format('YYYY.MM.DD HH:mm')}~{moment(this.state.list.ValidEnd).format('YYYY.MM.DD HH:mm')}
                                </Text>
                            </Flex>
                        </View>
                        <View style={{ width: '100%', height: 1, backgroundColor: '#EEEEEE' }} />
                        <Flex style={{ marginTop: '10%' }}>
                            <Flex justify={'around'} style={{ paddingLeft: 5, paddingRight: 5, flex: 1 }}>
                                {this.state.list.PayLoan === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('LoanInfo');
                                        }}
                                        direction={'column'}>
                                        <Image style={{ width: 35, height: 35 }} source={require('~/assets/community/tu1.png')} />
                                        <Text style={{ marginTop: 5 }}>0首付</Text>
                                    </Flex>
                                )}
                                {this.state.list.PackageState === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('GetGiftInfo');
                                        }}
                                        direction={'column'}>
                                        <Image style={{ width: 35, height: 35 }} source={require('~/assets/community/tu2.png')} />
                                        <Text style={styles.fontinfo}>拿好礼</Text>
                                    </Flex>
                                )}
                                {this.state.list.CoinState === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('GetMoneyInfo');
                                        }}
                                        direction={'column'}>
                                        <Image style={{ width: 35, height: 35 }} source={require('~/assets/community/tu3.png')} />
                                        <Text style={styles.fontinfo}>返现金</Text>
                                    </Flex>
                                )}
                                {this.state.list.CarState === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('GetCarInfo');
                                        }}
                                        direction={'column'}>
                                        <Image style={{ width: 35, height: 35 }} source={require('~/assets/community/tu4.png')} />
                                        <Text style={styles.fontinfo}>得汽车</Text>
                                    </Flex>
                                )}
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GetParkInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={{ width: 35, height: 35 }} source={require('~/assets/community/tu5.png')} />
                                    <Text style={styles.fontinfo}>得车位</Text>
                                </Flex>
                            </Flex>
                        </Flex>
                    </View>
                </View>
            </>
        );
    };
    _renderItem(item) {
        return (
            <Flex
                onPress={() => {
                    this.props.navigation.push('ParkInfo', {
                        parkingid: item.ParkingDataID,
                    });
                }}>
                <CwCard item={item} key={index} />
            </Flex>
        );
    }
    render() {
        return (
            <View style={{ width: '100%', height: '100%', backgroundColor: '#FFFFFF', borderRadius: 25 }}>
                <FlatList
                    data={this.state.parkinglist}
                    style={{ width: '100%' }}
                    showsVerticalScrollIndicator={false}
                    renderItem={(data) => this._renderItem(data.item)}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={this._HeaderView}
                    ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                    onEndReached={() => {
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                    refreshing={true}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                />
            </View>
        );
    }
}

export default ActivityInfo;
const styles = StyleSheet.create({});
